<template>
  <div class="com-container">
    <div class="com-chart" ref="sex_ref">
    </div>
  </div>
</template>

<script>
import indexdata from '@/api/data/indexdata'

export default {
  props: ['timecity'],
  watch: {
    timecity: {
      async handler (newVal) {
        await this.timeCityChart()
      },
      deep: true
    }
  },
  data () {
    return {
      chartInstance: null,//图标实例
      allData: null,//图表数据
      size: null,//大小
      startValue: 0,//区域缩放的起点值
      endValue: 5,//区域缩放的终点值
      timerId: null,//定时器的id值
    }
  },
  mounted () {
    this.initChart()
    this.getData()
    //增加屏幕大小变化监听的事件
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
    clearInterval(this.timerId)
  },
  methods: {
    async initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.sex_ref, 'dark')

      const markLineSetting = {
        symbol: 'none',
        lineStyle: {
          opacity: 0.3
        },
        data: [{
          type: 'max',
          label: {
            formatter: 'max: {c}'
          }
        }, {
          type: 'min',
          label: {
            formatter: 'min: {c}'
          }
        }]
      }
      const initOption = {
        title: {
          text: '历史人物男女比例',
          left: 10,
          top: 10
        },
        grid: {
          top: '35%',
          left: '5%',
          right: '25%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {},
        xAxis: {
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: { show: false }
        },
        yAxis: {
          offset: 20,
          splitLine: { show: false }
        },
        markLine: {
          z: -100
        },
        series: [{
          type: 'pictorialBar',
          symbolClip: true,
          barWidth: 120,
          label: {
            show: true,
            position: 'outside',
            offset: [0, -20],
            textStyle: {
              fontSize: 18,
              fontFamily: 'Arial'
            }
          },
          markLine: markLineSetting,
          z: 10
        }, {
          name: 'full',
          type: 'pictorialBar',
          barWidth: 120,
          animationDuration: 0,
          itemStyle: {
            color: '#ccc'
          },
        }
        ],

      }
      this.chartInstance.setOption(initOption)

    },
    async getData () {
      const res = await indexdata.getSexRatio()
      this.allData = res.data.sexRatio
      this.updateChart()
    },
    updateChart () {
      //人物形状
      const symbolsMap = new Map()
      symbolsMap.set('male', 'path://M694.7 248.2c-6.3-43.6-43.9-77.2-89.3-77.2L498.9 171l0 0.2-92.8 0c-45.4 0-82.9 33.5-89.3 77.2-0.6 3-1 6-1 9.2L315.8 441l0 120c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-46.8 0-228.4 14.5 0 0 685.4c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3L495.1 622.5l21.4 0 0-0.2 0 348.9c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3l0-685.5 14.5 0 0 275.1c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-303.4C695.8 254.3 695.4 251.2 694.7 248.2z M503.1 145.8c40.3 0 72.9-32.6 72.9-72.9 0-40.3-32.6-72.9-72.9-72.9s-72.9 32.6-72.9 72.9C430.2 113.2 462.9 145.8 503.1 145.8z')
      symbolsMap.set('female', 'path://M511.6 190.5c-39.4 0-71.3-39.9-71.3-89.1 0-49.2 31.9-89.1 71.3-89.1s71.3 39.9 71.3 89.1c0 49.2-31.8 89.1-71.3 89.1zM706 500.3c12.4 51-42.5 72.1-55.7 23l-53.8-216h-17.2l94.3 379.5h-88.7V972c0 51.6-63.2 51.6-63.2 0V686.7h-20.4v285.2c0 51.6-65.4 51.6-65.4 0V686.7H349.5l92.4-379.5H427l-53.6 216c-13.6 48-68.6 28.1-55.8-23.1L377.7 266c7-27.1 35.8-73.3 86-75.5h96.6c48.6 2.1 77.7 48.8 85.7 75.3l60 234.5z m0 0')

      const bodyMax = this.allData.length > 1 ? this.allData[0].numbers + this.allData[1].numbers : this.allData[0].numbers

      //男女名
      const sexMap = new Map()
      this.allData.forEach(item => {
        sexMap.set(item.sexratio, item.numbers)
      })

      //封装serie对象中的data
      const seriesData = []
      sexMap.forEach((numbers, sex) => {
        seriesData.push({
          symbol: symbolsMap.get(sex),
          value: numbers
        })
      })
      // 封装 series对象
      const seriesArr = []
      sexMap.forEach((numbers, sex) => {
        seriesArr.push({
          symbolBoundingData: bodyMax,
          label: {
            formatter: function (param) {
              return (param.value / bodyMax * 100).toFixed(0) + '%'
            },
          },
          data: seriesData
        })
      })
      if (seriesArr.length === 1) {
        seriesArr.push(seriesArr[0])
      }

      const dataOption = {
        title: {
          text: this.timecity.city === '湖南省' ? ' 历史人物男女比例' : this.timecity.city + ' 历史人物男女比例'
        },
        xAxis: {
          data: [...sexMap.keys()]
        },
        tooltip: {
          formatter: function (param) {
            if (sexMap.get('male') !== 'undefined' && sexMap.get('male') === param.value) {
              return '男性占比：' + Number(param.value / bodyMax * 100).toFixed(0) + '%'
            }
            if (sexMap.get('female') !== 'undefined' && sexMap.get('female') === param.value) {
              return '女性占比：' + Number(param.value / bodyMax * 100).toFixed(0) + '%'
            }
            return '空白'
          }
        },
        yAxis: {
          max: bodyMax
        },
        series: seriesArr
      }
      this.chartInstance.setOption(dataOption)
    },
    screenAdapter () {
      this.size = (this.$refs.sex_ref.offsetWidth / 100) * 3.6
      const adaptOption = {
        title: {
          textStyle: {
            fontSize: this.size / 1.2
          }
        },
        series: [
          {
            barWidth: this.size * 3,
          },
          {
            barWidth: this.size * 3,
          }
        ]
      }
      this.chartInstance.setOption(adaptOption)
      this.chartInstance.resize()
    },
    async timeCityChart () {
      const timeCity = {}
      timeCity.startYear = this.timecity.startYear + '-01-01'
      timeCity.endYear = this.timecity.endYear + '-01-01'
      timeCity.city = this.timecity.city
      const res = await indexdata.getSexRatioByTimeCity(timeCity)
      const data = res.data.sexRatio
      if (data.length === 0) {
        const option = {
          series: [{
            type:'pictorialBar',
            data:[],
            symbolBoundingData:0
          },{
            type:'pictorialBar',
            data:[],
            symbolBoundingData:0
          }]
        }
        this.chartInstance.setOption(option)
        return
      }
      this.allData = data
      this.updateChart()
    }
  },
}
</script>

<style scoped>

</style>
